<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05自定义JS对象</title>
</head>
<body>
    <table border="1px">
        <caption>商品列表</caption>
        <tr>
            <th>商品标题</th>
            <th>商品价格</th>
            <th>商品库存</th>
        </tr>
    </table>

<script>
    //1.实例化一个带属性与方法的对象
    let p1 = {
        name:'李四',
        age:21,
        eat:function(){
            console.log(this.name+'~~~'+this.age);
        }
    };
    console.log(p1);
    p1.eat();

    //2.先创建一个空对象,再动态添加属性和方法
    let p2 = {};
    p2.name = "王五";
    p2.age=30;
    p2.eat = function(){
        console.log(this.name+'~~~'+this.age);
    }
    p2.eat();

    let productInfo = {
        title:'iPhone15 proMax',
        price:5666,
        color:'石墨黑',
        CPU:'A16'
    };
    console.log(productInfo);

    let productArr = [
        {title:'华为Mate60',price:8000,num:200},
        {title:'小米14',price:5000,num:1000},
        {title:'苹果15',price:10000,num:800},
        {title:'OOPO Reno11',price:2999,num:10}
    ];
    console.log(productArr);
    console.log(productArr[0]);
    //1.获取页面中的table元素
    let table = document.querySelector("table");
    //2.使用循环遍历商品数组,获取每一个商品对象
    for(let i = 0;i<productArr.length;i++){
        //3.每循环到一件商品,需要创建一个tr与3个td
        let tr = document.createElement('tr');
        let titleTd = document.createElement('td');
        let priceTd = document.createElement('td');
        let numTd = document.createElement('td');
        //4.将数组中的数据存入对应的td单元格中
        titleTd.innerHTML = productArr[i].title;
        priceTd.innerHTML = productArr[i].price;
        numTd.innerHTML = productArr[i].num;
        //5.将准备好的3个单元格,挂到tr之下
        tr.append(titleTd,priceTd,numTd);
        //6.将准备好的tr,挂到table之下
        table.append(tr);
    }

</script>
</body>
</html>